@import "../../../theme.scss";

:host {
  display: block;
  height: 100%;
}

.page-container {
  height: 100%;

  .header{
    box-shadow: 0 3px 5px -1px #0003, 0 6px 10px #00000024, 0 1px 18px #0000001f;
    color: #fff;

    .user-info{
      display: flex;
      align-items: flex-start;
      flex-direction: column;
      font-size: 14px;
      margin-right: 45px;

      span{
        display: block;
        height: 20px;
        line-height: 20px;
      }
    }
  }

  .router-content{
    height: calc(100vh - 64px);
    padding: 20px;
    box-sizing: border-box;
    overflow: auto;
  }
}

mat-sidenav {
  width: 200px;

  mat-nav-list a{
    transition: all ease .5s;

    mat-icon{
      margin-right: 10px;
    }
  }

  mat-nav-list a:hover{
    background: rgba(0,0,0,.15);
  }
}

mat-toolbar {
  background: inherit;

  .logo{
    width: 90%;
  }
}

.mat-toolbar.mat-primary {
  position: sticky;
  top: 0;
  z-index: 1;
}

.example-spacer {
  flex: 1 1 auto; // 内容占满空白部分，且可随空间大小伸缩
}

.type-icon {
  color: #757575;
  margin-right: 5px;
}

.mat-tree{
  width: 190px;
  padding: 10px;
  box-sizing: border-box;
  overflow: auto;

  .mat-tree-node{
    margin-right: 20px;

    .mat-icon-button{
      margin-left: 20px;
    }

    span{
      padding: 5px 10px;
      box-sizing: border-box;
    }

    span.nav-item{
      cursor: pointer;
    }

    a.nav-item{
      cursor: pointer;
      background-color: #616161;
      color: #fff;
      border-radius: 10px;
      padding: 5px 10px;
    }

    span.nav-active{
      background-color: #616161;
      color: #fff;
      border-radius: 10px;
    }
  }
}


